<template>
  <div class="search">
    <div class="search-time">
      <p>上课时间</p>
      <div class="times">
          <el-date-picker
          v-model="param.startDate"
          size='small'
          type="date"
          placeholder="开始日期">
        </el-date-picker>
        <el-date-picker
          v-model="param.endDate"
          size='small'
          type="date"
          placeholder="结束日期"> 
        </el-date-picker>
      </div>
    </div>
    <div class="mode">
      <p>排课方式</p>
      <div class="modes">
        <el-radio-group v-model="modeRadio" :disabled="loading">
          <el-radio-button v-for="(item, index) in modeData" :key="item" :label="item.label" @change="modeChange(index)"></el-radio-button>
        </el-radio-group>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, watch, Ref } from 'vue'
import Moment from 'moment'
export default{
  props: {
    params: {
      type: Object,
      default: () => ({})
    },
    loading: {
      type: Boolean,
      default: true
    }
  },
  setup(props, { emit }) {
    let param = ref({
      searchType: 0,
      startDate: Moment().day(-14).format("YYYY-MM-DD"),
      endDate: Moment().day(7).format("YYYY-MM-DD")
    })
    let modeRadio = ref('全部')
    // let modeData = ref([{ label:'全部' }, { label:'一对一' }])
    let modeData = ref([{ label:'全部' }, { label:'一对一' }, { label:'小组课' }])
    let changeIdx = 0
    const modeChange = (index) => {
      changeIdx = index
      emit('search', { ...props.params, searchType: index, startDate: param.value.startDate, endDate: param.value.endDate })
    }
    watch(param.value, (val) => emit('search', { ...props.params, searchType: changeIdx, startDate: Moment(param.value.startDate).format("YYYY-MM-DD"), endDate: Moment(param.value.endDate).format("YYYY-MM-DD") }))
    
    return { modeRadio, modeData, modeChange, param }
  }

}
</script>

<style lang="scss" scoped>
  .search{
    margin-bottom: 20px;
    background: #fff url('./../../../assets/one-prepare/search-bg.png') no-repeat 100%;
    background-size: cover;
    padding: 30px;
    border-radius: 6px;
    p {
      font-weight: 500;
      line-height: 34px;
      color: #333;
    }
    .search-time, .mode {
      display: flex;
    }
    .mode {
      margin-top: 20px;
    }
    .times {
      margin-left: 20px;
      width: 375px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      :deep(.el-date-editor.el-input, .el-date-editor.el-input__inner){
        width: 180px;
      }
    }
    .modes {
      margin-left: 20px;
    }
  }
  @media screen and (max-width: 1280px){
    .search{
      .times{
        width: 360px;
        :deep(.el-date-editor.el-input, .el-date-editor.el-input__inner){
          width: 150px;
        }
      }
    }
  }
  @media screen and (min-width: 1440px){
    .search{
      min-height: 130px;
    }
  }
  @media screen and (min-width: 1680px){
    .search{
      min-height: 157px;
    }
  }

</style>
